<template>
	<view class="newCards" v-if="!close">
		<view class="newCards-mask">

		</view>
		<movable-area class="movable-area "
			:style="{height:150+ StatusBar1.top + StatusBar1.height+10+'px',marginTop:-80+'px'}">
			<movable-view class="newCards-box" inertia="true" direction="vertical" v-for="(item,index) in noticeList"
				:y='item.y' @change="onChange($event,index)" @click="jumpTo(index)">

				<view class="notice-icon " :style="{backgroundImage:'url('+item.icon+')'}">

				</view>
				<view class="notice-bodty notice-bodt">
					<view class=" noticeText">
						<text class="notice-title">{{item.title}}</text>
						<text class="notice-time"></text>
					</view>
					<view class="notice-desc noticeText">
						{{item.desc}}
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		name: "NewCards",
		data() {
			return {
				StatusBar1: this.Custom,
				noticeList: [], //通知列表
				y: 170,
				close: true,
				noticeIndex: 0,
			}

		},
		mounted() {
			let isReady = false;
			if (!isReady) {
				isReady = true;
			}

			uni.$on('notice', (data) => {
				this.getNotifyClean();
				if (data.data == "" || !isReady) {
					return false;
				}
				let arr = [];
				let res = arr.concat(data.data);
				this.close = false;
				for (let i in res) {
					let dat = {
						y: 0,
						oldY: 0,
						isShow: false,
						title: res[i].title || '',
						isClose: false,
						desc: res[i].desc || '',
						icon: res[i].icon || '',
						path: res[i].page || '',
					}
					res[i] = dat;
					this.noticeList.push(res[i]);
				}
				let index = 0;
				let meth = () => {
					if (index >= this.noticeList.length) {
						return false;
					}
					if (this.noticeList[index].isShow == false) {
						this.noticeList[index].isShow = true;
						setTimeout(() => {
							this.addNotice(index);
							index++;
							meth();
						}, 1500);
					} else {
						index++;
						meth();
					}
				}
				if (this.noticeList.length > 0) {
					meth();
				}
			})
		},

		methods: {
			/**
			 * 重构通知数据
			 */
			addNotice(index) {
				this.reciveNotice(index);
			},

			/**
			 * 跳转消息通知
			 */
			jumpTo(index) {
				// let num = parseInt(uni.getStorageSync('noticeNum'));
				// num--;
				// uni.setStorageSync('noticeNum',num);
				// if (num > 0) {
				// 	uni.setTabBarBadge({
				// 		index: 3,
				// 		text: num + "",
				// 		success: () => {
				
				// 		}
				// 	})
				// } else {
				// 	uni.removeTabBarBadge({
				// 		index: 3,
				// 		success: () => {
				
				// 		}
				// 	})
				// }
				
				uni.navigateTo({
					url: this.noticeList[index].path
				})
				this.isNotice(index);
				


			},

			/**
			 * 上滑操作
			 * @param {Object} e
			 */
			onChange: function(e, index) {

				if (this.noticeList[index].oldY - e.detail.y > 0 && !this.noticeList[index].isClose) { //表示上滑操作
					this.noticeList[index].isClose = true;
					this.noticeList[index].y = -100;
					setTimeout(() => {
						this.exitNotice(index);
					}, 500)
				}

				this.noticeList[index].oldY = e.detail.y

			},
			/**
			 * 
			 */
			isNotice(index) {

				if (this.noticeList.length - 1 == index) {
					this.noticeList = [];
					this.close = true;

				}
			},
			exitNotice(index) {


				if (index == 0) {
					this.noticeList = [];
					this.close = true;

				}
			},

			/**
			 *接受通知数据 
			 */
			reciveNotice(index) {
				let topHeight = this.StatusBar1.top + this.StatusBar1.height;
				let H = topHeight + 150;

				setTimeout(() => {
					if(this.close){
						return false;
					}
					this.noticeList[index].y = H;
					setTimeout(() => {
						if (this.close) {
							return false;
						}
						this.noticeList[index].oldY = 0;
						this.noticeList[index].y = -100;
						this.exitNotice(index);
					}, 5000)
				}, 200)


			},

			exitNotice(index) {
				setTimeout(() => {
					this.isNotice(index);
				}, 3000)
			},
			/**
			 * 获取消息通知列表
			 */
			getNotifyClean() {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					return false;
				}
				this.apiRequest('/buyer/NotifyCount', {
					area_id: uni.getStorageSync('area_id'),
				}, 0, "GET").then(res => {
					if (res.code == 200) {
					    let num=this.noticeNumFilter(res.data.num);
						if(num>0){
							uni.setStorageSync('noticeNum',num);
							// uni.setTabBarBadge({
							// 	index: 3,
							// 	text:  num+"",
							// 	success: () => {
							
							// 	}
							// })
						}
						
			
					}
			
				})
			},
			/**
			 * @param {Object} num
			 */
			noticeNumFilter(num) {
				switch (num) {
					case num >= 100:
						return "99+";
						break;
					case num <= 0:
						return 0;
						break;
					default:
						return num;
						break;
				}
			},
			
			


		}



	}
</script>

<style scoped>
	.newCards {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 9999;
		pointer-events: none;

	}

	.newCards-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 0;
		pointer-events: none;
		/* background-color: #000000;
		opacity: 0.5; */

	}

	.movable-area {
		width: 100%;
		pointer-events: auto;
		border: 1px solid transparent;
	}

	.newCards-box {
		width: 94%;
		margin-left: 3%;
		margin-top: -120upx;
		z-index: 99;
		height: 140upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
	}

	.notice-icon {
		width: 100upx;
		height: 100upx;
		position: relative;
		border-radius: 20upx;
		margin: 0 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		background-color: #C2C2C2;

	}

	.notice-bodty {
		height: 100upx;
		display: flex;
		position: relative;
		flex-direction: column;

	}

	.noticeText {
		width: 100%;
		height: 50%;
		text-overflow: ellipsis;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.notice-title {
		max-width: 69%;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		height: 50%;

	}

	.notice-desc {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.notice-time {
		max-width: 30%;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		position: absolute;
		float: right;
		right: 0upx;
	}
</style>
<style lang="scss">
	$width:750*0.94-100-60upx;

	.notice-bodt {
		width: $width;
	}
</style>
